<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="会员搜索">
        <el-autocomplete v-model="dataForm.memberSearch" @select="handleSelect" :fetch-suggestions="querySearchAsync" :disabled="!dataForm.id ? false : true"
                         placeholder="请输入会员姓名/会员电话" style="width:350px"></el-autocomplete>
      </el-form-item>
      <el-form-item label="会员名称" prop="memberName">
        <el-input v-model="dataForm.memberName" disabled ></el-input>
      </el-form-item>
    <el-form-item label="配镜时间" prop="glassesTime">
          <el-date-picker
            v-model="dataForm.glassesTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="配镜时间">
          </el-date-picker>
    </el-form-item>
      <el-row>
        <el-col :span="11">
          <el-form-item label="左眼">
          </el-form-item>
          <el-form-item label="球镜" prop="sph">
            <el-input v-model="dataForm.sph_l" placeholder="球镜"></el-input>
          </el-form-item>
          <el-form-item label="柱镜" prop="columnMirror">
            <el-input v-model="dataForm.columnMirror_l" placeholder="柱镜"></el-input>
          </el-form-item>
          <el-form-item label="轴位" prop="axial">
            <el-input v-model="dataForm.axial_l" placeholder="轴位"></el-input>
          </el-form-item>
          <el-form-item label="瞳距" prop="pd">
            <el-input v-model="dataForm.pd_l" placeholder="瞳距"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="右眼">
          </el-form-item>
          <el-form-item label="球镜" prop="sph">
            <el-input v-model="dataForm.sph_r" placeholder="球镜"></el-input>
          </el-form-item>
          <el-form-item label="柱镜" prop="columnMirror">
            <el-input v-model="dataForm.columnMirror_r" placeholder="柱镜"></el-input>
          </el-form-item>
          <el-form-item label="轴位" prop="axial">
            <el-input v-model="dataForm.axial_r" placeholder="轴位"></el-input>
          </el-form-item>
          <el-form-item label="瞳距" prop="pd">
            <el-input v-model="dataForm.pd_r" placeholder="瞳距"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          memberSearch: "",
          id_l: 0,
          id_r: 0,
          memberId: '',
          glassesTime: '',
          leftRight: '',
          sph_r: '',
          columnMirror_r: '',
          axial_r: '',
          pd_r: '',
          sph_l: '',
          columnMirror_l: '',
          axial_l: '',
          pd_l: '',
          remark: '',
          memberList: []
        },
        dataRule: {
          memberName: [
            { required: true, message: '该会员不存在', trigger: 'blur' }
          ],
          glassesTime: [
            { required: true, message: '配镜时间不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      //初始化
      init(id) {
        this.$refs["dataForm"].resetFields();
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/bus/optometryrecord/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.id_l = data.optometryRecord.id_l;
                this.dataForm.id_r = data.optometryRecord.id_r;
                this.dataForm.memberId = data.optometryRecord.memberId;
                this.dataForm.memberName = data.optometryRecord.memberName;
                this.dataForm.glassesTime = data.optometryRecord.glassesTime;
                this.dataForm.sph_l = data.optometryRecord.sph_l;
                this.dataForm.columnMirror_l = data.optometryRecord.columnMirror_l;
                this.dataForm.axial_l = data.optometryRecord.axial_l;
                this.dataForm.pd_l = data.optometryRecord.pd_l;
                this.dataForm.sph_r = data.optometryRecord.sph_r;
                this.dataForm.columnMirror_r = data.optometryRecord.columnMirror_r;
                this.dataForm.axial_r = data.optometryRecord.axial_r;
                this.dataForm.pd_r = data.optometryRecord.pd_r;
                this.dataForm.remark = data.optometryRecord.remark;
              }
            })
          }
        });
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/bus/optometryrecord/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id_l': this.dataForm.id_l || undefined,
                'id_r': this.dataForm.id_r || undefined,
                'memberId': this.dataForm.memberId,
                'glassesTime': this.dataForm.glassesTime,
                'sph_l': this.dataForm.sph_l,
                'columnMirror_l': this.dataForm.columnMirror_l,
                'axial_l': this.dataForm.axial_l,
                'pd_l': this.dataForm.pd_l,
                'sph_r': this.dataForm.sph_r,
                'columnMirror_r': this.dataForm.columnMirror_r,
                'axial_r': this.dataForm.axial_r,
                'pd_r': this.dataForm.pd_r,
                'remark': this.dataForm.remark,
                'state': this.dataForm.state,
                'author': this.dataForm.author,
                'createTime': this.dataForm.createTime,
                'modifier': this.dataForm.modifier,
                'modifyTime': this.dataForm.modifyTime
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      querySearchAsync(queryString, callback) {
        var list = [{}];
        this.$http({
          url: this.$http.adornUrl('/bus/member/listByCondition'),
          method: "get",
          params: this.$http.adornParams({
            memberName: queryString,
            mobile: queryString
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            for (let i of data.list) {
              i.currentPoint = i.currentPoint;
              i.id = i.id;
              i.mobile = i.mobile;
              i.memberName = i.memberName;
              i.value = i.memberName + "（" + i.mobile + "）";  //将想要展示的数据作为value
            }
            list = data.list;
          }
          callback(list);
        });
      },
      handleSelect(item) {
        if (item.id > 0) {
          this.dataForm.memberId = item.id;
          this.dataForm.currentPoint = item.currentPoint;
          this.dataForm.usePoint = 0;
          this.dataForm.pointMoney = 0;
          this.dataForm.memberName = item.memberName + "（电话：" + item.mobile + "，当前积分：" + item.currentPoint + "）";
          this.memberSearch = item.value;
        } else {
          this.dataForm.memberName = "";
          this.memberSearch = "";
        }
      }
    }
  }
</script>
